<template>
	<view class="page  bg-white">
		<view class="padding-lr  padding-bottom-120">
			<block v-if="type==1">
				<view class="solid-bottom padding-tb flex justify-between align-center">
					<text class="title text-lg text-333">公司名称</text>
					<input type="text" class="input text-lg text-999 flex-sub" name="user_nickname" maxlength="10"
						:auto-blur="true" v-model="formInfo.company" :placeholder="i18n['请输入']"
						style="text-align: right" />
				</view>
				<view class="padding-tb    solid-bottom   ">
					<view class="flex align-center justify-between w100">
						<view class="text-333  text-lg">联系地址 </view>
					</view>
					<view class=" margin-top bg-f8 radius-16 padding-sm">
						<textarea v-model="formInfo.address" placeholder="请输入" class="height-200 w100 text-df"
							maxlength="150"></textarea>
					</view>
				</view>
				<view class="   padding-tb solid-bottom    ">
					<view class="flex align-center justify-between w100">
						<view class="text-333  text-lg">公司地址 </view>
					</view>
					<view class=" margin-top bg-f8 radius-16 padding-sm">
						<textarea v-model="formInfo.company_address" placeholder="请输入" class="height-200 w100 text-df"
							maxlength="150"></textarea>
					</view>
				</view>
				<view class="solid-bottom padding-tb flex justify-between align-center">
					<text class="title text-lg text-333">统一社会信用码</text>
					<input type="number" class="input text-lg text-999 flex-sub" name="user_nickname" maxlength="18"
						:auto-blur="true" v-model="formInfo.company_code" :placeholder="i18n['请输入']"
						style="text-align: right" />
				</view>
				<view class="   padding-tb solid-bottom    ">
					<view class="flex align-center justify-between w100">
						<view class="text-333  text-lg">法定经营范围 </view>
					</view>
					<view class=" margin-top bg-f8 radius-16 padding-sm">
						<textarea v-model="formInfo.company_area" placeholder="请输入" class="height-200 w100 text-df"
							maxlength="250"></textarea>
					</view>
				</view>
			</block>
			<view class="solid-bottom padding-tb flex justify-between align-center">
				<text class="title text-lg text-333">{{type==0?'姓名':'法人姓名'}}</text>
				<input type="number" class="input text-lg text-999 flex-sub" name="user_nickname" maxlength="6"
					:auto-blur="true" v-model="formInfo.user_name" :placeholder="i18n['请输入']"
					style="text-align: right" />
			</view>
			<view class="solid-bottom padding-tb flex justify-between align-center">
				<text class="title text-lg text-333">{{type==0?'手机号':'法人手机号'}}</text>
				<input type="number" class="input text-lg text-999 flex-sub" name="user_nickname" maxlength="11"
					:auto-blur="true" v-model="formInfo.mobile" :placeholder="i18n['请输入']" style="text-align: right" />
			</view>
			<view class="solid-bottom padding-tb flex justify-between align-center">
				<text class="title text-lg text-333">{{type==0?'身份证号':'法人身份证号'}}</text>
				<input type="number" class="input text-lg text-999 flex-sub" name="user_nickname" maxlength="18"
					:auto-blur="true" v-model="formInfo.id_card" :placeholder="i18n['请输入']" style="text-align: right" />
			</view>
			<view class=" padding-tb ">
				<text class="title text-lg text-333">请上传身份证照正反面</text>
				<view class="flex align-center justify-center flex-direction margin-top">
					<image :src="formInfo.cardImg1||imgBaseUrl+'user/u33.png'" mode="widthFix"
						class="width-480 height-206" @tap='uploadImg(0)'></image>
					<view class="margin-top">正面（国徽面）</view>
				</view>
				<view class="flex align-center justify-center flex-direction margin-top">
					<image :src="formInfo.cardImg2||imgBaseUrl+'user/u33.png'" mode="widthFix"
						class="width-480 height-206" @tap='uploadImg(1)'></image>
					<view class="margin-top">反面（人像面）</view>
				</view>
				<view class="flex align-center justify-center flex-direction margin-top" v-if="type==1">
					<image :src="formInfo.cardImg3||imgBaseUrl+'user/u33.png'" mode="widthFix"
						class="width-480 height-206" @tap='uploadImg(2)'></image>
					<view class="margin-top">营业执照</view>
				</view>
			</view>
			<view class="padding-tb">
				<view class="text-666 text-sm">注：</view>
				<view class="text-666 text-sm">
					为保证平台用户安全性，需要您进行实名认证，实名认证通过之
					后即可操作商家版块</view>
			</view>
		</view>
		<view class=" submit-btn text-bold text-333 " @click.stop="handleSubmit">提交信息认证</view>
		<view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
			<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree"
				:src="imgBaseUrl + 'global/g6.png'"></image>
			<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
				:src="imgBaseUrl + 'global/g16.png'"></image>
			<view>
				提交即默认同意
				<text class="text-theme text-bold" @tap="handleJump"
					data-url="/pages/user/login/user-agreement/index?id=1">《商家认证协议》</text>

			</view>
		</view>
		<fu-notwork></fu-notwork>

	</view>
</template>

<script>
	var date = new Date();
	var y = Number(date.getFullYear());
	var m = Number(date.getMonth() + 1);
	var d = Number(date.getDate());
	if (m < 10) {
		m = '0' + m
	}
	if (d < 10) {
		d = '0' + d
	}

	import amapFile from '@/libs/amap-wx.js';
	import {
		UploadImage
	} from '@/common/utils/index';
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	// @see 引入组件wPicker
	import wPicker from "./components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker,
		},
		data() {
			return {
				startYear: y,
				endYear: (y + 2),
				id: 0, // 商品id
				imgWechatUrl: this.imgWechatUrl,
				order_sn: null, // 订单编号
				num: 0, // 商品数量
				images: [],
				myAmapFun: null, // 高德地图实例
				playInfo: '', //玩法
				formInfo: {
					cardImg1: '',
					cardImg2: '',
					cardImg3: '',
				}, //
				is_select_agree: false,
				goods_address: '',
				province: '', //省
				city: '', //市
				district: '', //区
				defaultVal: [1, 0, 0], // {Array} 城市编码
				cityVisible: false, // {Boolean} 组件wPicker是否显示
				brandVisible: false,
				typeVisible: false,
				isLimit: true, //是否开启性别限制
				isLoading: false, // 防连点
				type: '', //0 个人 1商家
			};
		},
		onLoad(options) {

			const {
				type
			} = options;

			this.type = type;
		},
		watch: {},
		onUnload() {
			uni.$off('playMethod')
		},
		methods: {
			uploadImg(e) {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// \res.tempFilePaths[0]
						// 开始上传
						new UploadImage([res.tempFilePaths[0]], {
							complete: function(result) {
								console.log(result, 'res');
								if (result.length) {
									if (e == 0) {
										_this.formInfo.cardImg1 = result[0].path;
									} else if (e == 1) {
										_this.formInfo.cardImg2 = result[0].path;
									} else {
										_this.formInfo.cardImg3 = result[0].path;
									}


								}
							},
						});
					},
				});
			},
			/**
			 * @param 是否选择同意协议
			 */
			handle_select() {
				this.is_select_agree = !this.is_select_agree
			},


			// 提交
			handleSubmit() {
				// uni.$emit('storeApply')
				uni.redirectTo({
					url: './applyIng'
				})
				return
				if (this.isLoading) return;
				uni.hideKeyboard();
				let arr1 = [];
				if (this.goods_bannerImages.length != 0) {
					this.goods_bannerImages.map(item => {
						arr1.push(item.id)
					})
				}

				let data = {
					name: this.goods_title,

				};
				if (this.id) {
					data.id = this.id
				}
				this.isLoading = true;
				this.$api.post('/v1/639bc97ad4208', data).then(res => {
						if (res.data.code == 1) {
							uni.$emit('friendApply')
							uni.navigateBack()

						} else {
							this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.isLoading = false;
						console.log('err: ' + JSON.stringify(err));
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.goods-wrap {
		padding: 24rpx 24rpx 34rpx;
	}

	.margin-t-8 {
		margin-top: 8rpx;
	}

	.padding-b-60 {
		padding-bottom: 60rpx;
	}

	.text-111 {
		color: #111111;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.line-20 {
		height: 20rpx;
		width: 100%;
		background: #F8F8F8;
	}

	.after-item-wrap {
		padding: 30rpx 24rpx 30rpx;

		.after-item {

			&.money {
				position: relative;
				height: 122rpx;
				padding-bottom: 44rpx;

				.tips {
					position: absolute;
					left: 0;
					bottom: 20rpx;
				}
			}

		}
	}


	.submit-btn {
		border-radius: 100rpx;
		width: 88%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $bgtheme;
		font-size: 32rpx;
		margin: auto;
	}

	.wen {
		width: 702rpx;
		height: 272rpx;
		// border: 1rpx solid #e8e8e8;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		background: #F8F8F8;
		;
		border-radius: 16rpx;
		position: relative;

		textarea {
			width: 100%;
			height: 85%;
		}

		.tips {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;

		&>view {
			width: 100%;
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		// height: 108rpx!important;
		// line-height: 108rpx!important;
		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.update-box {
		width: 600rpx;
		background-color: #FFFFFF;

		.title {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333333;
		}

		.content {
			width: 100%;
			height: 200rpx;
			box-sizing: border-box;
		}

		.foot {
			display: flex;
			text-align: center;
		}
	}

	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}
</style>